React Suspense 리소스 조정: 다중 리소스 로딩 관리 마스터하기

            
const fetchData = (url) => {
  let status = 'pending';
  let result;
  let suspender = fetch(url)
    .then(
      (res) => res.json(),
      (err) => {
        status = 'error';
        result = err;
      }
    )
    .then(
      (res) => {
        status = 'success';
        result = res;
      }
    );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

export default fetchData;

            

              
                Copy
              
            
          

            
import React, { Suspense } from 'react';
import fetchData from './fetchData';

const userResource = fetchData('/api/user');
const postsResource = fetchData('/api/posts');
const commentsResource = fetchData('/api/comments');

function UserProfile() {
  const user = userResource.read();
  const posts = postsResource.read();
  const comments = commentsResource.read();

  return (
    

      
{user.name}
      
{user.bio}
      
Posts
      

        {posts.map((post) => (
          
{post.title}
        ))}
      
      
Comments
      

        {comments.map((comment) => (
          
{comment.text}
        ))}
      
    
  );
}

function App() {
  return (
    Loading user profile...